<template>
  <div class="p-5">
    <a-tabs type="card" tabPosition="top" v-model:activeKey="activeKey" @change="changeModem">
      <!-- 新增设备 -->
      <a-tab-pane class="tb1" key="add">
        <template #tab>
          <span class="add1">{{ t('routes.demo.inet.add') }}</span>
          <span class="icon5">
            <Icon icon="subway:add-1" color="#0960bd" :size="18" />
          </span>
        </template>
        <div class="box2">
          <a-form :model="queryParams" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18 }">
            <a-row>
              <a-col :span="8">
                <a-form-item :label="t('routes.demo.inet.modems_name_title')">
                  <a-input v-model:value="addParams.name" :placeholder="t('routes.demo.inet.modems_name_placeholder')" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item :label="t('routes.demo.inet.enter_ip_title')">
                  <a-input v-model:value="addParams.ip" :placeholder="t('routes.demo.inet.enter_ip_placeholder')" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item :label="t('routes.demo.inet.modems_port_title')">
                  <a-input v-model:value="addParams.port" placeholder="3290" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item :label="t('routes.demo.inet.select_mtype_title')">
                  <a-select ref="select" v-model:value="addParams.mtype" style="width: 100%"
                    :placeholder="t('routes.demo.inet.select_mtype_placeholder')" allowClearget_mset>
                    <a-select-option :value="item.id" v-for="item in typeOptions" :key="item.id">{{
                      item.name
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8" :offset="12">
                <a-form-item label="">
                  <a-button type="primary" @click="save_add">{{
                    t('routes.demo.inet.add1')
                    }}</a-button>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <div class="div22"></div>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-item label="频谱扫描间隔">
                  <a-input v-model:value="addParams.name" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="文件大小限制">
                  <a-input v-model:value="addParams.ip" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="采集时间限制">
                  <a-input v-model:value="addParams.port1" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="文件名称格式">
                  <a-input v-model:value="addParams.port1" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="采集可以通道号">
                  <a-input v-model:value="addParams.port1" placeholder="请输入" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8" :offset="12">
                <a-form-item label="">
                  <a-button type="primary" @click="save_add">确定</a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts">
import { useAppStore } from '/@/store/modules/app.ts';
import { defineComponent, reactive, toRaw, ref, onMounted, createVNode } from 'vue';
import type { Router, RouteRecordRaw } from 'vue-router';
import { Form } from 'ant-design-vue';

import { Icon } from '/@/components/Icon';
import img3 from '/@/assets/images/224.png';
import { message } from 'ant-design-vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { async } from '../../../../components/Form/src/hooks/useAutoFocus';
export default defineComponent({
  components: {
    Icon,
  },
  setup() {
    const appStore = useAppStore();
    onMounted(() => {

    });
    const { t } = useI18n();
    const columns = [
      {
        title: '解调器',
        dataIndex: 'name',
      },
      {
        title: '通道编号',
        align: 'center',
        dataIndex: 'industry',
      },
      {
        title: '中心频率',
        align: 'center',
        dataIndex: 'region',
      },
      {
        title: '符号速率',
        align: 'center',
        dataIndex: 'phone',
      },
      {
        title: '通道锁定',
        align: 'center',
        dataIndex: 'notice_time',
      },
      {
        title: '译码锁定',
        align: 'center',
        dataIndex: 'notice_num',
      },
      {
        title: '解调锁定',
        align: 'center',
        dataIndex: 'status',
      },
      {
        title: '信号功率',
        align: 'center',
        dataIndex: 'declare_time',
      },
      {
        title: '信噪比',
        align: 'center',
        dataIndex: 'files',
        slots: { customRender: 'file' },
      },
      {
        title: '误码率',
        align: 'center',
        slots: { customRender: 'content' },
      },
      {
        title: '频率偏移',
        align: 'center',
        slots: { customRender: 'letterDoc' },
      },
      {
        title: '采集/结束',
        align: 'center',
        dataIndex: 'is_pass',
      },
      {
        title: '审采集状态',
        align: 'center',
        dataIndex: 'inspector_name',
      },

      {
        title: '操作',
        align: 'center',
        fixed: 'right',
        key: 'action',
        width: 220,
        slots: { customRender: 'action' },
      },
    ];
    const typeOptions = ref([]);
    const chnOptions = reactive([
      { value: 1, label: '通道1' },
      { value: 2, label: '通道2' },
      { value: 3, label: '通道3' },
      { value: 4, label: '通道4' },
    ]);
    const chn2Options = reactive([
      { value: 1, label: '通道1' },
      { value: 2, label: '通道2' },
      { value: 3, label: '通道3' },
      { value: 4, label: '通道4' },
      { value: 5, label: '通道5' },
      { value: 6, label: '通道6' },
      { value: 7, label: '通道7' },
      { value: 8, label: '通道8' },
    ]);
    const formatOptions = ref([]);
    const rfinOptions = ref([]);
    const bbOptions = ref([]);
    const workingModeOptions = ref([]);
    const spectralInversionOptions = ref([]);
    const rolloffFactorOptions = ref([]);
    const polarOptions = ref([]);
    const directOptions = ref([]);
    const hdlcTypeOptions = ref([]);
    const dataTypeOptions = ref([]);
    const dataProcessingOptions = ref([]);
    const chn_BBFOptions = ref([]);
    const output_formatOptions = ref([]);
    const delbinOptions = ref([])

    const tabPosition = ref(1);
    const addParams = reactive({
      ip: '',
      name: '',
      mtype: '',
      port: 3290,
    });
    const chnsetParams = reactive({
      ip: '',
      chn: 1,//
      ena: 1,//通道开关
      rfin: undefined,//频谱反转
      f: undefined,//频率
      rdc: undefined,//滚降系数
      si: undefined,//频谱反转
      rt: undefined,//符号速率
    });
    const outsetParams = reactive({
      ip: '',
      chn: 1,//
      sip: undefined,//输出主机IP
      sport: null,//输出源端口
      out_type: undefined,//输出格式
      bbf: undefined,//BB帧时标
      out_dest_ip: undefined,//输出目的IP
      dport: null,//输出目的端口
    });

    const savesetParams = reactive({
      ip: '',
      chn: 1,
      data_processing: undefined,  // 数据处理方式
      file_size: undefined,  // 文件大小
      file_count: undefined,  // 文件数量
      output_path: '',  // 输出文件路径
      stream_ip: '',  // 流转发IP
      stream_port: undefined,  // 流转发端口
      sat_name: undefined,  // 卫星名称，比如75.5度，实际输入为75.5*100=7550
      polar: undefined,  // 极化方式，0x00：H极化，0x01：V极化
      direct: undefined,  // 方向指示: 0:上行,1:下行
      hdlc_type: undefined,  // HDLC类型指示: 0:标准HDLC,1:非标HDLC
      delbin: undefined,//删除流文件方式
    });

    const saveParams2 = reactive({
      ip: '',
      chn: 1,
      ena: undefined,
      listen_ip: '',  // 监听IP
      listen_port: undefined,  // 监听端口
      data_type: undefined,  // 数据类型 e1|hdlc
      data_processing: undefined,  // 数据处理方式 file/stream
      file_size: undefined,  // 输出文件大小 单位M
      file_count: undefined,  // 输出文件个数
      output_path: '',  // 输出文件路径
      stream_ip: '',  // 流转发IP
      stream_port: undefined,  // 流转发端口
      fc: undefined,  // 信号载波频率（单位：Hz）
      rs: undefined,  // 信号信息速率（单位kb）
      sat_name: undefined,  // 卫星名称，比如75.5度，实际输入为75.5*100=7550
      polar: undefined,  // 极化方式，0x00：H极化，0x01：V极化
      direct: undefined,  // 方向指示: 0:上行,1:下行
      hdlc_type: undefined,  // HDLC类型指示: 0:标准HDLC,1:非标HDLC
      delbin: undefined,//删除流文件方式
    });
    const type1chn = ref(1)
    const saveParams3 = reactive({
      ip: '',
      chn: 1,
      status: 0,

    });
    const saveParams4 = reactive({
      ip: '',
      chn: 1,
      ena: 0,

    });
    const activeKey = ref();
    const activeType = ref();

    const panes = ref();
    const queryParams = reactive({
      cpn: 1,
      epc: 10,
    });
    const chns = ref();
    const chnarr1 = ref();
    const chnarr2 = ref();
    const outarr = ref();
    const savearr = ref();
    const checked1 = ref(1);
    const checked2 = ref(1);
    const dataList = ref([]);
    const loading = ref(false);

    return {
      dataList,
      columns,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      queryParams,
      checked1,
      checked2,
      panes,
      img3,
      addParams,
      activeKey,
      t,
      tabPosition,
      typeOptions,
      chnOptions,
      chn2Options,
      formatOptions,
      rfinOptions,
      bbOptions,
      workingModeOptions,
      spectralInversionOptions,
      rolloffFactorOptions,
      output_formatOptions,
      delbinOptions,
      chn_BBFOptions,
      chnsetParams,
      outsetParams,
      savesetParams,
      saveParams2,
      chns,
      appStore,
      activeType,
      polarOptions,
      directOptions,
      hdlcTypeOptions,
      dataTypeOptions,
      dataProcessingOptions,
      type1chn,
    };
  },
});
</script>

<style lang="less" scoped>
.spane1 {
  color: #0960bd;
  cursor: pointer;
}

.list1 {
  padding: 20px 0;
}

.content1 {
  padding: 15px 0;
  text-indent: 24px;
}

.hh1 {
  line-height: 34px;
  text-align: center;
  font-weight: bold;
}

.dd1 {
  line-height: 34px;
}

.dd2 {
  line-height: 34px;
  text-indent: 24px;
}

.dd3 {
  line-height: 34px;
  text-indent: 24px;
  float: right;
  margin: 20px 0;
}

.tb1 {
  background: #fff;
  padding-top: 10px;
}

.menu_list {
  display: flex;
  margin-top: 30px;
  height: 120px;
}

.menu_list_item {
  margin: 0 20px;
  width: 120px;
  height: 60px;
  padding: 5px 0;
  border-radius: 10px;
  text-align: center;
  border: 5px solid #87e8de;
  color: #08979c;
  background: #e6fffb;
}

.icon4 {
  position: relative;
  top: 2px;
}

.icon5 {
  position: relative;
  top: 0px;
  left: 10px;
  margin-right: 20px;
}

.box2 {
  margin: 30px 0;
  padding-bottom: 150px;
}

.add1 {
  color: #0960bd;
}

.ant-tabs-tab-active .add1 {
  color: #fff;
}

.titlea1 {
  width: 100%;
  line-height: 36px;
  font-size: 16px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  margin: 10px 0 20px 0;
}

.ant-tabs {
  margin-top: 20px;
}
</style>
<style>
.ant-tabs-bar {
  margin: 0;
}

.ant-tabs-nav .ant-tabs-tab {
  height: 160px;
  background: #e6fffb;
}

.ant-tabs-nav .ant-tabs-tab .anticon {
  margin-left: 8px;
}

.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
  border: 1px solid #0960bd;
  border-bottom: 0;
}

/*.ant-tabs-tab-active .app-iconify{
  color: #fff !important;
}*/
.ant-divider-horizontal {
  border-color: #fff;
  margin-bottom: 35px;
}

.ant-input {
  color: #fff;
}

.ant-select-selection-item,
.ant-divider-dashed {
  color: #fff;
}

.ant-form-item-control-input-content {
  color: #ccc;
}

.notice1 {
  width: 100%;
  padding-top: 150px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  padding-bottom: 100px;
}

.spanf1 {
  color: #05e618;
}

.ant-tabs-tab {
  position: relative;
}

.del {
  width: 20px;
  height: 20px;
  position: absolute;
  z-index: 33;
  right: 5px;
  top: -8px;
}
</style>
<style lang='less'>
.ant-tabs .ant-tabs-left-bar .ant-tabs-nav-wrap {
  height: 600px;
  overflow-y: scroll;
}

.ant-select-clear {
  background: #3B3D3E;
}

.anticon {
  color: #fff;
}

.ant-divider-horizontal {
  margin-bottom: 0;
}

.div22 {
  width: 96%;
  margin-left: 2%;
  margin-bottom: 30px;
  height: 20px;
  border-bottom: 1px solid #ccc;
}
</style>